<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    align="left"
    v-loading="currLoading"
    :close-on-click-modal="false"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="600px">
    <div v-if="dialogVisible">
      <div style="font-size: 13px; line-height: 60px; text-indent: 80px;">
        商品: 『<span class="red" v-text="currProduct.name"></span>』
      </div>
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="型号" align="left" prop="model">
          <el-input v-model="form.model" :maxlength="50" placeholder="型号" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="图片" align="left" prop="image">
          <el-upload
            class="avatar-uploader"
            :action="UploadFileUrl"
            :headers="getHeader()"
            name="myUploadFile"
            :show-file-list="false"
            :on-success="uploadIconSuccess">
            <img v-if="form.image" :src="form.image" class="avatar" style="width: 100px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input v-model="form.image" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="价格" align="left" prop="price">
          <el-input-number class="my-input-number" :controls="false" v-model="form.price" @change="checkPrice" :max="99999999" :min="0.01" :step="0.01"
                           style="width: 100px"></el-input-number>
        </el-form-item>
        <el-form-item label="库存" align="left" prop="nums">
<!--          <el-input-number class="my-input-number" :controls="false" v-model="form.nums" :min="1" :step="1"-->
<!--                           style="width: 100px"></el-input-number>-->
          <el-tag type="success" v-text="form.nums" @change="checkNums"></el-tag>
        </el-form-item>
        <el-form-item
          v-show="currProduct.id>0"
          v-if="currProduct.productSpecificationsData && currProduct.productSpecificationsData.length>0"
          v-for="(item,index) in currProduct.productSpecificationsData"
          :key="index"
          :label="item.name"
          align="left">
          <!--规格-自定义输入类型-->
          <el-input v-if="item.type.id===0"
                    v-model="form.specificationsData[item.name]"
                    maxlength="30"
                    style="width: 200px"></el-input>

          <!--规格-选项类型-->
          <el-select v-if="item.type.id===1" v-model="form.specificationsData[item.name]">
            <el-option
              v-for="(_item,_index) in item.itemList"
              :key="_index"
              :label="_item"
              :value="_item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" align="left" prop="status">
          <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#CCCCCC"></el-switch>
        </el-form-item>
        <el-form-item label="是否默认" align="left" prop="status">
          <el-switch v-model="form.isDefault" active-color="#13ce66" inactive-color="#CCCCCC"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

import ChooseStockBox from '../Common/ChooseStockBox'

export default {
  name: 'CreateStockDialog',
  components: {ChooseStockBox},
  props: {
    successFunction: Function
  },
  data: function () {
    return {
      info: '创建库存',
      dialogVisible: false,
      currLoading: false,
      currProduct: {
        id: 0,
        name: '',
        productSpecificationsData: [],
      },
      form: {
        supplierProductId: 0,
        specificationsData:[],
        image: '',
        price: 1,
        nums: 100,
        model: '',
        status: true,
        isDefault: true,
      },
      rules: {
        model: [
          {required: true, message: '请输入 型号', trigger: ['blur', 'change']},
          {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change']}
        ],
        price: [
          {required: true, message: '请输入 价格', trigger: ['blur', 'change']},
          {validator: this.validateMoney, trigger: 'blur'}
        ],
        nums: [
          {required: true, message: '请输入 库存', trigger: ['blur', 'change']},
        ]
      }
    }
  },
  mounted () {
  },
  methods: {
    checkNums:function (index) {
      this.form.nums=this.toInt(this.form.nums)
    },
    checkPrice:function () {
      this.form.price=((this.form.price-0).toFixed(2)-0)
    },
    uploadIconSuccess: function (res) {
      this.form.image = res.data
    },
    open: function (infoData) {
      this.info = '创建-商品型号'
      if (infoData.id) {
        this.currProduct.id = infoData.supplierProductId
        this.currProduct.name = infoData.supplierProductName
        this.currProduct.modelArr = []
        let $this = this
        $this.MyRequest(this.ApiDoNameSupplier + 'Product/getProductDetail', {id: infoData.supplierProductId}, function (data) {
          $this.info = '更新-商品型号'
          $this.form.price = infoData.price
          $this.form.image = infoData.image
          $this.form.nums = infoData.nums
          $this.form.model = infoData.model
          $this.form.specificationsData = infoData.specificationsData
          $this.form.status = infoData.status.id === 1
          $this.form.isDefault = infoData.isDefault.id === 1
          $this.currProduct.productSpecificationsData = data.supplierProduct.specificationsArr
          console.log('$this.currProduct.productSpecificationsData',$this.currProduct.productSpecificationsData)
          if ($this.$refs.form) {
            $this.$refs.form.resetFields()
          }
          $this.form.id = infoData.id
          $this.dialogVisible = true
          $this.$forceUpdate()
        })

      } else {
        this.form = {
          price: 0,
          nums: 0,
          image: '',
          model: '',
          status: true
        }
        if (this.$refs.form) {
          this.$refs.form.resetFields()
        }
        this.dialogVisible = true
        this.$forceUpdate()
      }

    },
    submit: function () {
      let $this = this
      $this.$refs.form.validate((valid) => {
        if (valid) {
          var api = 'Product/insertModel'
          var form = Object.assign({}, $this.form)
          if (form.id > 0) {
            api = 'Product/updateModel'
          }
          form.supplierProductId = $this.currProduct.id
          form.status = form.status ? 1 : 0
          form.isDefault = form.isDefault ? 1 : 0
          if (!form.specificationsData){
            form.specificationsData={}
          }
          form.specificationsData=JSON.stringify(form.specificationsData)
          $this.currLoading = true
          $this.MyRequest(this.ApiDoNameSupplier + api, form, function () {
            $this.$message.success('操作成功')
            $this.currLoading = false
            $this.dialogVisible = false
            if (typeof $this.$props.successFunction === 'function') {
              $this.$props.successFunction()
            }
            $this.$forceUpdate()
          }, function (response) {
            $this.$message.warning(response.message)
            $this.currLoading = false
            $this.$forceUpdate()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
